<template>
  <div class="echartsContainer"><div id="echarts"></div></div>
</template>

<script setup lang="ts">
// 引入全部的echarts内容
import * as echarts from "echarts";
import { onMounted, onUnmounted } from "vue";
import { useTagLists } from "../../store";
// 从父组件上获得属性type 类型是Boolean
// 可以根据type的不同决定是支出图表还是收入图表  true是收入 false是支出
const props = defineProps({
  type: Boolean,
});
// 引入pinia的状态值
const store = useTagLists();
// 用于echarts显示的data
const EchartData: any = [];
// 从pinia的allInfo中筛选出element.type等于props.type的内容
// element.type为true是收入 false是支出

store.allInfo.forEach((element: { type: boolean; money: any; label: any }) => {
  if (element.type === props.type) {
    // 只需要element.money和element.label
    EchartData.push({ value: element.money, name: element.label });
  }
});
// 必须要把echarts操作dom的操作写到OnMounted里
// 只有onMounted才有已经渲染好的dom节点供echarts去操作
let chartDom: any;
let myChart: any;
// 在Mounted之后再进行dom操作 这时候已经渲染并且挂载了元素到dom上了
onMounted(() => {
  chartDom = document.getElementById("echarts");
  myChart = echarts.init(chartDom);
  let option = {
    legend: {
      top: "bottom",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["30%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "40",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: EchartData,
      },
    ],
  };

  myChart.setOption(option);
});

onUnmounted(() => {
  myChart.dispose();
});
</script>

<style scoped lang="less">
.echartsContainer {
  height: 35vh;
  width: 70vh;
  display: flex;
  #echarts {
    height: 100%;
    width: 100%;
  }
}
</style>
